<!DOCTYPE html>
<html>
  <head>
    <style>
      body .loader-wrapper {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
      }
      body .loader {
        height: 100%;
        position: relative;
        margin: auto;
        width: 400px;
      }
      body .loader_overlay {
        width: 150px;
        height: 150px;
        background: transparent;
        box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.67),
          0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset;
        border-radius: 100%;
        z-index: -1;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      body .loader_cogs {
        z-index: -2;
        width: 100px;
        height: 100px;
        top: -120px !important;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      body .loader_cogs__top {
        position: relative;
        width: 100px;
        height: 100px;
        transform-origin: 50px 50px;
        -webkit-animation: rotate 10s infinite linear;
        animation: rotate 10s infinite linear;
      }
      body .loader_cogs__top div:nth-of-type(1) {
        transform: rotate(30deg);
      }
      body .loader_cogs__top div:nth-of-type(2) {
        transform: rotate(60deg);
      }
      body .loader_cogs__top div:nth-of-type(3) {
        transform: rotate(90deg);
      }
      body .loader_cogs__top div.top_part {
        width: 100px;
        border-radius: 10px;
        position: absolute;
        height: 100px;
        background: #f98db9;
      }
      body .loader_cogs__top div.top_hole {
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background: white;
        position: absolute;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      body .loader_cogs__left {
        position: relative;
        width: 80px;
        transform: rotate(16deg);
        top: 28px;
        transform-origin: 40px 40px;
        animation: rotate_left 10s 0.1s infinite reverse linear;
        left: -24px;
        height: 80px;
      }
      body .loader_cogs__left div:nth-of-type(1) {
        transform: rotate(30deg);
      }
      body .loader_cogs__left div:nth-of-type(2) {
        transform: rotate(60deg);
      }
      body .loader_cogs__left div:nth-of-type(3) {
        transform: rotate(90deg);
      }
      body .loader_cogs__left div.left_part {
        width: 80px;
        border-radius: 6px;
        position: absolute;
        height: 80px;
        background: #97ddff;
      }
      body .loader_cogs__left div.left_hole {
        width: 40px;
        height: 40px;
        border-radius: 100%;
        background: white;
        position: absolute;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
      body .loader_cogs__bottom {
        position: relative;
        width: 60px;
        top: -65px;
        transform-origin: 30px 30px;
        -webkit-animation: rotate_left 10.2s 0.4s infinite linear;
        animation: rotate_left 10.2s 0.4s infinite linear;
        transform: rotate(4deg);
        left: 79px;
        height: 60px;
      }
      body .loader_cogs__bottom div:nth-of-type(1) {
        transform: rotate(30deg);
      }
      body .loader_cogs__bottom div:nth-of-type(2) {
        transform: rotate(60deg);
      }
      body .loader_cogs__bottom div:nth-of-type(3) {
        transform: rotate(90deg);
      }
      body .loader_cogs__bottom div.bottom_part {
        width: 60px;
        border-radius: 5px;
        position: absolute;
        height: 60px;
        background: #ffcd66;
      }
      body .loader_cogs__bottom div.bottom_hole {
        width: 30px;
        height: 30px;
        border-radius: 100%;
        background: white;
        position: absolute;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }

      /* Animations */
      @-webkit-keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes rotate {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }
      @-webkit-keyframes rotate_left {
        from {
          transform: rotate(16deg);
        }
        to {
          transform: rotate(376deg);
        }
      }
      @keyframes rotate_left {
        from {
          transform: rotate(16deg);
        }
        to {
          transform: rotate(376deg);
        }
      }
      @-webkit-keyframes rotate_right {
        from {
          transform: rotate(4deg);
        }
        to {
          transform: rotate(364deg);
        }
      }
      @keyframes rotate_right {
        from {
          transform: rotate(4deg);
        }
        to {
          transform: rotate(364deg);
        }
      }
      .loading-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 99999;
      }
      .loading {
        position: absolute;
        width: 400px;
        height: 400px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .loading span {
        display: inline-block;
        vertical-align: middle;
        width: 0.6em;
        height: 0.6em;
        margin: 0.19em;
        background: #007db6;
        border-radius: 0.6em;
        -webkit-animation: loading 1s infinite alternate;
        animation: loading 1s infinite alternate;
      }

      /*
 * Dots Colors
 * Smarter targeting vs nth-of-type?
 */
      .loading span:nth-of-type(2) {
        background: #008fb2;
        -webkit-animation-delay: 0.2s;
        animation-delay: 0.2s;
      }
      .loading span:nth-of-type(3) {
        background: #009b9e;
        -webkit-animation-delay: 0.4s;
        animation-delay: 0.4s;
      }
      .loading span:nth-of-type(4) {
        background: #00a77d;
        -webkit-animation-delay: 0.6s;
        animation-delay: 0.6s;
      }
      .loading span:nth-of-type(5) {
        background: #00b247;
        -webkit-animation-delay: 0.8s;
        animation-delay: 0.8s;
      }
      .loading span:nth-of-type(6) {
        background: #5ab027;
        -webkit-animation-delay: 1s;
        animation-delay: 1s;
      }
      .loading span:nth-of-type(7) {
        background: #a0b61e;
        -webkit-animation-delay: 1.2s;
        animation-delay: 1.2s;
      }

      /*
 * Animation keyframes
 * Use transition opacity instead of keyframes?
 */
      @-webkit-keyframes loading {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes loading {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
    <title><%= productName %></title>
    <!-- require APlayer -->

    <meta charset="utf-8" />
    <meta name="description" content="<%= productDescription %>" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta
      name="viewport"
      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
    />

    <link rel="icon" type="image/ico" href="icons/favicon.ico" />
  </head>
  <body>
    <!-- DO NOT touch the following DIV -->

    <div id="q-app" style="height: 100%;">
      <div class="loader-wrapper">
        <div class="loader">
          <div class="loader_overlay"></div>
          <div class="loader_cogs">
            <div class="loader_cogs__top">
              <div class="top_part"></div>
              <div class="top_part"></div>
              <div class="top_part"></div>
              <div class="top_hole"></div>
            </div>
            <div class="loader_cogs__left">
              <div class="left_part"></div>
              <div class="left_part"></div>
              <div class="left_part"></div>
              <div class="left_hole"></div>
            </div>
            <div class="loader_cogs__bottom">
              <div class="bottom_part"></div>
              <div class="bottom_part"></div>
              <div class="bottom_part"></div>
              <div class="bottom_hole"><!-- lol --></div>
            </div>
            <p style="text-align: center;">loading</p>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
